<script>
import loginJs from "@/mixins/login"
import { login } from "@/api";
const CryptoJS = require("crypto-js");
export default {
  name: "GzLogin",
  mixins: [loginJs],
  data() {
    return {
      userInfo: {
        username: "",
        password: ""
      },
      disabled: false,
      chosen: false
    }
  },
  mounted() {
    this.getCookie()
  },
  methods: {
    //设置cookie
    setCookie(c_name, c_pwd, exdays, remeberFlag) {
      var exdate = new Date() // 获取时间
      exdate.setTime(exdate.getTime() + 24 * 60 * 60 * 1000 * exdays) // 保存的天数
      // 字符串拼接cookie
      window.document.cookie = "userName" + "=" + c_name + ";path=/;expires=" + exdate.toGMTString()
      window.document.cookie = "userPwd" + "=" + c_pwd + ";path=/;expires=" + exdate.toGMTString()
      window.document.cookie =
        "remeberFlag" + "=" + remeberFlag + ";path=/;expires=" + exdate.toGMTString()
    },
    // 读取cookie
    getCookie() {
      if (document.cookie.length > 0) {
        var arr = document.cookie.split("; ") // 这里显示的格式需要切割一下自己可输出看下
        for (var i = 0; i < arr.length; i++) {
          var arr2 = arr[i].split("=") //再次切割
          // 判断查找相对应的值
          if (arr2[0] == "userName") {
            this.userInfo.username = arr2[1] // 保存到保存数据的地方
          } else if (arr2[0] == "userPwd") {
            this.userInfo.password = arr2[1]
          }
        }
      }
    },
    chose() {
      this.chosen = !this.chosen
    },
    loginForm() {
      let params = this.userInfo;
      let password = params.password;
      if (password) {
        password = CryptoJS.MD5(password).toString();
      }
      login({ username: params.username, password: password })
        .then(({ data }) => {
          const { code, message } = data
          this.$message({
            message: code === "200" ? "登录成功" : message,
            type: code === "200" ? "success" : "error",
            center: true,
            duration: 1000,
          });
          if (code === "200") {
            // 调用配置cookie方法,传入账号名，密码，和保存天数3个参数
            this.chosen
              ? this.setCookie(this.userInfo.username, this.userInfo.password, 7, this.chosen)
              : ""
            this.manageLoginSuccess()
          }
        })
        .finally(() => {
          this.disabled = false
        })
    },
    renderLoginForm() {
      return <c-form>
        <c-form-item>
          <div class="title">用户登录</div>
        </c-form-item>
        <c-form-item class="username-form-item">
          <c-input
            v-model={this.userInfo.username}
            prefix-icon="bg-user"
            placeholder="请输入用户名"
            nativeOnKeydown={this.handleLogin.bind(this)}
          ></c-input>
        </c-form-item>
        <c-form-item class="pwd-form-item">
          <c-input
            v-model={this.userInfo.password}
            prefix-icon="bg-pwd"
            type="password"
            placeholder="请输入密码"
            nativeOnKeydown={this.handleLogin.bind(this)}
          ></c-input>
        </c-form-item>
        <c-form-item>
          <div class={[ this.chosen === false ?"unchosen" : "chosen" , "chose-item"]} on-click={this.chose}></div>
          <span on-click={this.chose}>记住密码</span>
        </c-form-item>
        <c-form-item class="btn-form-item">
          <c-button
            disabled={this.disabled}
            on-click={this.handleLogin.bind(this, "userInfo")}
            nativeOnKeydown={this.handleLogin.bind(this)}
          >
            登 录
          </c-button>
        </c-form-item>
      </c-form>
    },
    renderRight() {
      return <div class="login-right">
        <div class="app-download">
          <div class="img"></div>
          <div class="download-content">光泽数字城管APP下载</div>
        </div>
      </div>
    }
  },
  render() {
    return (
      <div class="login-bg-gz">
        <div class="logo">光泽县智慧城管平台</div>
        <div class="login-box">
          {this.renderLoginForm()}
          {this.renderRight()}
        </div>
      </div>
    );
  }
}
</script>

<style lang="scss">
.login-bg-gz {
  input:-internal-autofill-previewed,
  input::placeholder,
  input:-internal-autofill-selected {
    -webkit-text-fill-color: #54b0f5 !important;
    font-size: 18px;
    transition: background-color 5000s ease-in-out 0s !important;
  }
  left: 0;
  right: 0;
  overflow-x: auto;
  width: 100%;
  height: 100%;
  position: fixed;
  background: url(~@/assets/images/gz/loginbg.png) no-repeat center center fixed;
  background-size: 100% 100%;
  i {
    display: inline-block;
  }
  .logo {
    display: flex;
    width: 100%;
    height: 100px;
    z-index: 100;
    justify-content: center;
    align-items: center;
    font-size: 46px;
    font-family: HiraginoSansGB-W6, HiraginoSansGB;
    font-weight: normal;
    color: #fff;
    line-height: 46px;
    text-shadow: 0px 0px 10px #0057ff;
    background: url(~@/assets/images/gz/header.png) no-repeat;
    background-size: 100% 100px;
  }
  .login-box {
    width: 842px;
    margin: 269px auto 0;
    height: 459px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 269px;
    background: url(~@/assets/images/gz/frame1.png) center no-repeat;
    background-size: 100% 100%;
    .title {
      width: 136px;
      margin: 0 auto;
      font-family: PingFangSC-Medium;
      font-size: 24px;
      color: #54b0f5;
      line-height: 24px;
      text-align: center;
      &::after {
        content: "";
        display: block;
        position: relative;
        bottom: 0;
        left: 0;
        top: 12px;
        width: 100%;
        height: 2px;
        background: #54b0f5;
      }
    }
    .el-form {
      // padding-top: 20px;
      width: 547px;
      height: inherit;
      margin: 0 auto;
      .el-form-item {
        width: 420px;
        height: 52px;
        margin: 20px auto;
        text-align: center;
        &:first-child {
          margin-top: 35px;
        }
        &:nth-child(2) {
          margin-top: 40px;
        }
        &:nth-child(4) {
          height: 24px;
          .el-form-item__content {
            line-height: 24px;
            display: flex;
            span {
              margin-left: 14px;
              font-family: PingFangSC-Medium;
              font-size: 18px;
              color: #54b0f5;
              line-height: 24px;
              cursor: pointer;
            }
          }
        }
        .el-form-item__content {
          text-align: left;
          .el-input {
            width: 450px;
            height: 52px;
            line-height: 52px;
            border-radius: 4px;
            padding-left: 10px;
            background-color: rgba(84, 176, 245, 0.18);
            border: 1x solid #45a7ef;
            .el-input__inner {
              border: none;
              background: none;
              outline: none;
              border-radius: 0;
              height: 40px;
              font-size: 18px;
              font-family: MicrosoftYaHei-Bold;
              line-height: 28px;
              color: #54b0f5;
              opacity: 1;
              padding-left: 40px !important;
            }
            .el-input__inner::placeholder {
              font-size: 14px;
              font-family: Microsoft YaHei;
              font-weight: 400;
              color: #54b0f5;
            }
            .el-input__prefix {
              left: 18px;
              margin-right: 24px;
            }
            .bg-user {
              width: 22px;
              height: 22px;
              background: url(~@/assets/images/gz/account.png) center no-repeat;
              background-size: 100% 100%;
              vertical-align: middle;
            }
            .bg-pwd {
              width: 22px;
              height: 22px;
              background: url(~@/assets/images/gz/password.png) center no-repeat;
              background-size: 100% 100%;
              vertical-align: middle;
            }
          }
        }
        .el-button {
          border: none;
          width: 450px;
          height: 52px;
          // background-image: linear-gradient(90deg, #00c9ff 0%, #005aff 100%);
          background: #12b1e4 100%;
          font-size: 14px;
          font-family: MicrosoftYaHei-Bold;
          color: #fff;
          border-radius: 4px;
          opacity: 1;
        }
        .chose-item {
          cursor: pointer;
        }
        .chosen {
          width: 22px;
          height: 22px;
          background: url(~@/assets/images/gz/chosen.png) center no-repeat;
          background-size: 100% 100%;
        }
        .unchosen {
          width: 22px;
          height: 22px;
          background: url(~@/assets/images/gz/unchosen.png) center no-repeat;
          background-size: 100% 100%;
        }
      }
    }
    .login-right {
      flex: 1;
      display: flex;
      align-items: center;
      // justify-content: center;
      padding-left: 38px;
      .app-download {
        width: 195px;
        height: 231px;
        background: url(~@/assets/images/gz/frame2.png) center no-repeat;
        background-size: 100% 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 30px 0 20px;
        .img {
          width: 130px;
          height: 130px;
          background: url(~@/assets/images/gz/app.png) center no-repeat;
          background-size: 100% 100%;
        }
        .download-content {
          font-family: PingFangSC-Medium;
          margin-top: 20px;
          font-size: 14px;
          color: #54b0f5;
        }
      }
    }
  }
}
</style>
